import React, { Component } from 'react';
import TheTable from '@/components/TheTable'
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import ThePagination from "@/components/ThePagination";
import TheButton from '@/components/TheButton'
import { Table, Modal, Form } from 'antd'

export default class HotelService extends Component {
    constructor() {
        super()
        this.queryFormRef = React.createRef()
        this.state = {
            NewColumns: [],
            columns: [
                {
                    title: '服务ID',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '服务名称',
                    dataIndex: 'age',
                    key: 'age',
                },
                {
                    title: '服务类型',
                    dataIndex: 'address',
                    render: (text, record) => {
                        return (
                            <div>
                                {
                                    true ? '宠物酒店' : '预约挂号'
                                }
                            </div>
                        )
                    }
                },
                {
                    title: '是否展示用户端',
                    dataIndex: 'age',
                    key: 'age',
                },
                {
                    title: '服务状态',
                    dataIndex: 'address',
                    key: 'address',
                    render: (text, record) => {
                        return (
                            <div>
                                {
                                    true ? '展示' : '不展示'
                                }
                            </div>
                        )
                    }
                }, {
                    title: '服务价格',
                    dataIndex: 'originalPrice',
                    key: 'originalPrice',
                    render: (text, record) => {
                        return <React.$Price price={record.originalPrice || 0} />
                    }
                }, {
                    title: '上架时间',
                    dataIndex: 'address',
                    key: 'address',
                    render: (text, record) => {
                        return (
                            <div>
                                {
                                    true ? '已上架' : '已下架'
                                }
                            </div>
                        )
                    }
                }, {
                    title: '操作',
                    fixed: 'right',
                    render: (text, record) => {
                        return (
                            <div>
                                <TheButton onClick={() => this.onView(record)}>查看详情</TheButton>
                                <TheButton onClick={() => this.shelfOn(record)}>服务上架</TheButton>
                                <TheButton onClick={() => this.shelfOff(record)}>服务下架</TheButton>
                                <TheButton onClick={() => this.calendar(record)}>价格日历</TheButton>
                                <TheButton onClick={() => this.onEdit(record)}>编辑</TheButton>
                                <TheButton onClick={() => this.onDel(record)}>删除</TheButton>
                            </div>
                        )
                    }
                },
            ],
            dataSource: [{}],
            searchOption: [
                { field: 'serviceName', label: '服务名称', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'serviceId', label: '服务ID', placeholder: '请选择', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'serviceType', label: '服务类型', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ label: "全部", value: "0" }, { label: "预约挂号", value: "1" }, { label: "宠物酒店", value: "2" }] },
            ],
            queryForm: {

            },
            pageData: {
                pageNo: 1,
                pageSize: 10

            },
            total: 0,
            form_show: true,
            visible: false
        }
    }
    componentDidMount() {
    }
    getData() { }
    onView() {
        this.setState({
            visible: true
        })
    }
    shelfOn() { }
    shelfOff() { }
    calendar() { 
        this.props.history.push('/hotelService/calendar')
    }
    onEdit() { }
    onDel() { }

    onFormSearch(values) {
        this.setState({
            pageData: { pageNo: 1, pageSize: 10 }
        }, () => {
            this.getData(values)
        })
    }
    onReset() {
        this.setState({
            queryForm: {},
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
        }, () => {
            this.getData()
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };
    onColumnsFilter = (value) => {
        this.setState({
            NewColumns: value
        })
    }
    onTableRefresh() {
        this.getData()
    }
    render() {
        const { visible, dataSource, columns, searchOption, pageData, total, form_show } = this.state
        return (
            <div className='p-layout-box'>
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption} onGetValues={(values) => this.onFormSearch(values)} onReset={() => { this.onReset() }}>
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.onTableRefresh()}
                    onColumnsFilter={(value) => { this.onColumnsFilter(value) }}
                >
                    <TheButton size="middle" onClick={()=>this.props.history.push('/hotelService/add')} type="primary" >新增服务</TheButton>
                </TheTableExtend>
                <TheTable border dataSource={dataSource} columns={columns} />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                <Modal
                    title={`服务详情`}
                    width={800}
                    visible={visible}
                    onCancel={() => this.setState({ visible: false })}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form style={{ height: 500, overflow: 'auto' }}>
                        <Form.Item
                            label="服务类型"
                            name="price"

                        >

                        </Form.Item>
                        <Form.Item
                            label="服务名称"
                            name="repeatType"

                        >
                        </Form.Item>

                        <Form.Item
                            label="服务标签"
                            name="repeatType"

                        >

                        </Form.Item>
                        <Form.Item
                            label="用户端是否展示服务"
                            name="repeatType"

                        >

                        </Form.Item>
                        <Form.Item
                            label="宠物种类"
                            name="repeatType"
                        >

                        </Form.Item>
                        <Form.Item
                            label="宠物重量(kg)"

                        >
                            <Form.Item
                                name="repeatType"
                                style={{ display: 'inline-block' }}

                            >

                            </Form.Item>

                            <div style={{ display: 'inline-block', margin: '0 8px', }}>~</div>
                            <Form.Item
                                style={{ display: 'inline-block', }}
                                name="overRepeatDate"

                            >

                            </Form.Item>

                        </Form.Item>


                        <Form.Item
                            label="服务主图"
                            name="activityImg"

                        >
                        </Form.Item>
                        <Form.Item
                            label="服务图片"
                            name="activityImg"

                        >

                        </Form.Item>
                        <Form.Item
                            label="服务价格"
                            name="activityImg"

                        >

                        </Form.Item>
                        <Form.Item
                            label="服务说明"
                            name="activityImg"

                        >

                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}
